Block Element Modifier BEM

유지보수 프로젝트 관리를 위한 css 이름 짓는 방법

참고 링크:

• https://www.integralist.co.uk/posts/bem/#4
• http://getbem.com/introduction/

Block

단일 개체로 유의미한 것

• header, container, menu, checkbox, input ...

Element

Block을 구성하는 것

• menu item, list item, checkbox caption, header title ...

Modifier

Block과 Element의 상태를 나타내는 수식어

• disabled, highlighted, checked, fixed ...

실제 사용 예

<section class="widget">
    <h1 class="widget__header">Sterling Calculator</h1>
    <form class="widget__form" action="process.php" method="post">
        <p>Please enter an amount: (e.g. 92p, &pound;2.12)</p>
        <p>
            <input name="amount" class="widget__input widget__input--amount"> 
            <input type="submit" value="Calculate" class="widget__input widget__input--submit">
        </p>
    </form>
</section>

1. 우선 Block단위가 무엇이 될지를 결정해야함. 여기선 <section>의 widget
2. 안의 것들은 Element이므로 widget__<element> 식으로 이름을 짓는다.
3. input의 형태가 다른게 두 종류 있으므로 widget__input--amount 이런식으로 modifier를 작성한다.